<template>
  <div>
    <div class="ub inputBox ub-ver">
      <div class="ub mar_05 h_3 bg_w ub-pj ub-ac uhide">
        <div class="fc-8b">手机号注册</div>
        <div class="clk_yzm" @click="toggleYzm">{{clic_text}}</div>
      </div>
      <!-- <div class="ub mar_05 h_3 ub-ac ub-pj">
            <input type="number" placeholder="手机号" class="ub" v-model="pho_num">
            <div class="ub-img1 clear_icon" @click='clearClick' v-show="pho_num"></div>
          </div> -->
      <!-- <div class="ub mar_05 h_3 ub-ac">
              <input placeholder="验证码" class="wd_50 ub">
              <div class="yzm wd_50" @click="getyzm">{{getYzm_text}}</div>
            </div> -->
      <yzmInput :getYzm_text="getYzm_text" :yzmType="yzmType" :optType="optType"></yzmInput>
      <div class="ub mar_05 h_3 ub-ac ub-pj">
        <input placeholder="请输入密码" :value='pd' class="ub ub-f1" :type="inputType" @input="pdChange">
        <div class="ub ub-img1" @click='eyeClick' :class='showpd'></div>
      </div>
      <div class="ub login mar_05 ub-pc ub-ac" @click='nextClc'>
        <div>注册</div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import headerDiv from 'components/header/header.vue';
import yzmInput from 'components/yzmInput/yzmInput.vue';
const MES = 0;
const VOIC = 1;
const TXT = [
  { yzm: '获取短信验证码', toggle: '→收不到短信，使用语音验证码' },
  { yzm: '获取语音验证码', toggle: '→不方便接听，使用短信验证码' }
];
export default {
  name: 'forgetPd',
  data: function () {
    return {
      pho_num: '',
      pd: '',
      yzmType: MES,
      optType: '1',
      showpd: 'unsee',
      inputType: 'password'
      // yzm_text: this.getYzm_text(),
      // clic_text: this.getYlic_text()
    }
  },
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '快速注册',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
  },
  components: {
    yzmInput
  },
  methods: {
    // clearClick: function () {
    //   console.log('123');
    //   this.pho_num = '';
    // },
    checkPho: function () {
      let pho = this.$store.state.forgetPd.phone;
      let phoReg = /^1\d{10}$/;
      if (!phoReg.test(pho)) {
        this.$store.dispatch('showTx', { text: '请输入正确的手机号' });
        return false;
      }
      return pho;
    },
    checkYzm: function () {
      let yzm = this.$store.state.forgetPd.yzm;
      let yzmReg = /^\d{6}$/;
      if (!yzmReg.test(yzm)) {
        this.$store.dispatch('showTx', { text: '请输入正确的验证码' });
        return false;
      }
      return yzm;
    },
    checkPd: function () {
      let pd = this.pd;
      let pdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
      if (!pdReg.test(pd)) {
        this.$store.dispatch('showTx', { text: '请输入6到20位含数字和字母的密码' });
        return false;
      }
      return pd;
    },
    nextClc: function () {
      console.log('next123');
      let self = this;
      let password = this.checkPd();
      let yzm = this.checkYzm();
      let pho = this.checkPho();
      console.log(pho + '|' + yzm);
      if (!pho || !yzm || !password) {
        return false;
      }
      let content = {
        'code': yzm,
        'userMobile': pho,
        'userPassword': this.$utils.getMD5(password)
      };
      let data = this.$utils.getUserContent(content);
      console.log(data);
      this.$http.post(this.$RS.register, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body;
          console.log(res);
          if (res.code === 1000) {
            this.$store.dispatch('showTx', { text: res.message });
            let content = {
              text: '注册成功',
              callback: function () {
                self.$router.go(-1)
              }
            }
            this.$store.dispatch('showTx', content);
            // this.$store.commit('setLogin', userInfo);
            // this.$router.push('/login')
          } else {
            console.log('out');
            this.$store.dispatch('showTx', { text: res.message });
          }
        },
        function (err) {
          console.log(err);
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    // getyzm: function () {
    //   console.log('yzm')
    // },
    toggleYzm: function () {
      console.log('tyzm')
      this.yzmType = this.yzmType === MES ? VOIC : MES;
    },
    pdChange: function (e) {
      this.pd = e.target.value;
    },
    eyeClick: function () {
      // console.log('123');
      // console.log(this.inputType);
      this.inputType = this.inputType === 'password' ? 'text' : 'password';
      this.showpd = this.showpd === 'see' ? 'unsee' : 'see';
    }
  },
  computed: {
    getYzm_text: function () {
      console.log('text');
      console.log(TXT);
      console.log(TXT[this.yzmType])
      // return TXT[this.yzmType].yzm;
      return TXT[this.yzmType].yzm;
    },
    clic_text: function () {
      return TXT[this.yzmType].toggle;
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.clear_icon
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('form_clear@2x.png');
.yzm
  color: #f8bb5a;
.fc-8b
  color: #8b8b8b;
.clk_yzm
  color: $bgCol;
  font-size: f_times(0.8);
</style>